<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/template-web.js"></script>
    <script src="js/ajax2.js"></script>

    <style>
        .container {
            padding-top: 100px;
        }
    </style>

</head>

<body>
    <div class="container">
        <!-- 显示在一行 -->
        <div class="form-inline">
            <!-- 省 -->
            <div class="form-group">          <!-- form-group对div优化 -->
                <select class="form-control" id="provinces"></select>       <!-- form-control对select框优化 -->
            </div>
            <!-- 市 -->
            <div class="form-group">
                <select class="form-control" id="citys">
                    <option value="">请选择城市</option>
                </select>
            </div>
            <!-- 区县 -->
            <div class="form-group">
                <select class="form-control" id="areas">
                    <option value="">请选择区县</option>
                </select>
            </div>
        </div>

    </div>

    <!-- 
        省份的模板
        provinces = [
        {
            "id":"100",
            "name":"河北省"
            },
        {
            "id":"101",
            "name":"河南省"
            },
        {
            "id":"102",
            "name":"山东省""
            },
        
        ]
    -->
    <script type="text/html" id="tpl1">
        <option>请选择省份</option>
        {{each provinces}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

    <!-- 城市的模板 -->
    <script type="text/html" id="tpl2">
        <option>请选择城市</option>
        {{each citys}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

    <!-- 区县的模板 -->
    <script type="text/html" id="tpl3">
        <option>请选择区县</option>
        {{each areas}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>


    <script>
        //从服务端获取数据
        const provinceObj = document.querySelector("#provinces")
        const cityObj = document.querySelector("#citys")
        const areaObj = document.querySelector("#areas")

        //发送ajax
        ajax({
            type: "GET",
            url: "http://www.biwuit.cn/spboot/provinces",
            //返回的数据    
            // [{"name":"黑龙江省","id":"001"},{"name":"四川省","id":"002"},{"name":"湖北省","id":"003"},{"name":"江苏省","id":"004"}]
            success: function (data) {
                if (data.length != 0) {
                    //渲染数据
                    console.log(data)
                    console.log(JSON.parse(data))
                    /* 
                        data参数: 模板需要的是对象,但是后端返回的是字符串,所以没法显示
                        解决办法:通过JSON.parse()转换为json数组格式对象
                    */
                    const options = template("tpl1", {provinces: JSON.parse(data)})
                    // console.log(options)
                    provinceObj.innerHTML = options;
                }
            }
        })

        /* 
            给省份和城市绑定change事件
        */
        provinceObj.onchange = function () {
            const cid = this.value;
            console.log(cid)
            //通过pid加载城市
            ajax({
                type: "GET",
                url: "http://www.biwuit.cn/spboot/cities",
                data: {
                    id: cid
                },
                success:function(data){
                    if(data.length>0){
                        //渲染模板
                        const options = template("tpl2", {citys: JSON.parse(data)})
                    // console.log(options)
                    cityObj.innerHTML = options;
                    }
                }
            })

        }


        cityObj.onchange = function () {
            const pid = this.value;
            console.log(pid)
            //通过pid加载城市
            ajax({
                type: "GET",
                url: "http://www.biwuit.cn/spboot/areas",
                data: {
                    id: pid
                },
                success:function(data){
                    if(data.length>0){
                        //渲染模板
                        const options = template("tpl3", {areas: JSON.parse(data)})
                    // console.log(options)
                    areaObj.innerHTML = options;
                    }else{
                        //当没有返回数据的时候,需要清空模板
                        const options = template('tpl3',{areas: null});
                        areaObj.innerHTML = options;
                        // areaObj.innerHTML = '';
                    }
                }
            })

        }
    </script>
</body>

</html>